<script setup>
import { message } from 'ant-design-vue';
import { nextTick, onMounted, reactive, ref, toRaw } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import dayjs from 'dayjs';
import {
	addProduct,
	updateProduct,
	getUserInfo,
	getVendorList,
	getProgrames
} from '@/service/services.js';
import { useAccountStore } from '@/stores/account.js';
const account = useAccountStore();
const programes = ref([]);
const vendorList = ref([]);
const formRef = ref();
const labelCol = {
	span: 5
};
const wrapperCol = {
	span: 13
};
const state = reactive({
	formState: {
		code: '',
		name: '',
		type: '',
		var1: '',
		var2: '',
		var3: '',
		var4: '',
		var5: '',
		var6: '',
		var7: '',
		price: '',
		total: '',
		companyName: '',
		programName: '',
		warningValue: '',
		remark: ''
	}
});
const rules = {
	name: [
		{
			required: true,
			message: '请输入产品名称',
			trigger: 'change'
		}
		// {
		// 	min: 3,
		// 	max: 5,
		// 	message: 'Length should be 3 to 5',
		// 	trigger: 'blur'
		// }
	],
	code: [
		{
			required: true,
			message: '请输入产品编码',
			trigger: 'change'
		}
	],
	type: [
		{
			required: true,
			message: '请输入材料类别',
			trigger: 'change'
		}
	],
	var1: [
		{
			required: true,
			message: '请输入规格型号',
			trigger: 'change'
		}
	],
	var2: [
		{
			required: true,
			message: '请输入单位',
			trigger: 'change'
		}
	],
	programName: [
		{
			required: true,
			message: '请输入产品所属项目名称',
			trigger: 'change'
		}
	]
};
const router = useRouter();
const route = useRoute();
const onSubmit = () => {
	formRef.value
		.validate()
		.then(() => {
			console.log('values', state.formState, toRaw(state.formState));
			account.spinning = true;
			if (route['query']?.id) {
				updateProduct({ id: route['query']?.id, ...state.formState })
					.then((res) => {
						getUserInfo({ account: account.account })
							.then((res) => {
								account.menuList = res.menuList;
								account.level = res.level;
								account.programes = res.programes.split(',');
								account.currentPrograme = res.currentPrograme;
								account.spinning = false;
								formRef.value.resetFields();
								router.push({ path: '/main/product' });
							})
							.catch((err) => {
								account.spinning = false;
								message.error(err);
							});
					})
					.catch((err) => {
						account.spinning = false;
						message.error(err);
					});
			} else {
				addProduct(state.formState)
					.then((res) => {
						getUserInfo({ account: account.account })
							.then((res) => {
								account.menuList = res.menuList;
								account.level = res.level;
								account.programes = res.programes.split(',');
								account.currentPrograme = res.currentPrograme;
								account.spinning = false;
								formRef.value.resetFields();
								router.push({ path: '/main/product' });
							})
							.catch((err) => {
								account.spinning = false;
								message.error(err);
							});
					})
					.catch((err) => {
						account.spinning = false;
						message.error(err);
					});
			}
		})
		.catch((error) => {
			account.spinning = false;
			console.log('error', error);
		});
};
const resetForm = () => {
	formRef.value.resetFields();
	router.back();
};
onMounted(() => {
	account.spinning = true;
	getProgrames({})
		.then((resp) => {
			programes.value = resp;
			getVendorList({
				pageNum: 1,
				pageSize: 9999
			})
				.then((res) => {
					vendorList.value = res.list;
					account.spinning = false;
				})
				.catch((err) => {
					account.spinning = false;
					message.error(err);
				});
		})
		.catch((err) => {
			account.spinning = false;
			message.err(err);
		});
	if (route['query']?.id) {
		state.formState = {
			...route['query'],
			inboundDate: dayjs(route['query'].inboundDate)
		};
	}
	console.log(route);
});
</script>

<template>
	<section class="contain-edit-inbound">
		<section class="edit">编辑产品信息</section>
		<a-form
			ref="formRef"
			:model="state.formState"
			:rules="rules"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
		>
			<a-form-item ref="name" label="产品名称" name="name">
				<a-input v-model:value="state.formState.name" />
			</a-form-item>
			<a-form-item ref="code" label="产品编码" name="code">
				<a-input v-model:value="state.formState.code" />
			</a-form-item>
			<a-form-item ref="type" label="材料类别" name="type">
				<a-input v-model:value="state.formState.type" />
			</a-form-item>
			<a-form-item ref="var1" label="规格型号" name="var1">
				<a-input v-model:value="state.formState.var1" />
			</a-form-item>
			<a-form-item ref="var2" label="单位" name="var2">
				<a-input v-model:value="state.formState.var2" />
			</a-form-item>
			<!-- <a-form-item label="单户用量" name="var3">
				<a-input v-model:value="state.formState.var3" />
			</a-form-item>
			<a-form-item label="单层用量" name="var4">
				<a-input v-model:value="state.formState.var4" />
			</a-form-item>
			<a-form-item label="首层用量" name="var5">
				<a-input v-model:value="state.formState.var5" />
			</a-form-item>
			<a-form-item label="层数" name="var6">
				<a-input v-model:value="state.formState.var6" />
			</a-form-item>
			<a-form-item label="公式" name="var7">
				<a-input v-model:value="state.formState.var7" />
			</a-form-item>
       -->
			<a-form-item label="单价" name="price">
				<a-input v-model:value="state.formState.price" />
			</a-form-item>
			<a-form-item label="总用量" name="total">
				<a-input v-model:value="state.formState.total" />
			</a-form-item>
			<a-form-item label="供应商名称" name="companyName">
				<a-select v-model:value="state.formState.companyName">
					<a-select-option
						:key="i"
						v-for="i in vendorList"
						:value="i.companyName"
						>{{ i.companyName }}</a-select-option
					>
				</a-select>
			</a-form-item>
			<a-form-item label="项目名称" name="programName">
				<a-select v-model:value="state.formState.programName">
					<a-select-option :key="i" v-for="i in account.programes" :value="i">{{
						i
					}}</a-select-option>
				</a-select>
			</a-form-item>
			<!-- <a-form-item label="预警值" name="warningValue">
				<a-input v-model:value="state.formState.warningValue" />
			</a-form-item> -->
			<a-form-item label="备注" name="remark">
				<a-textarea v-model:value="state.formState.remark" />
			</a-form-item>
			<a-form-item :wrapper-col="{ span: 14, offset: 5 }">
				<a-button type="primary" @click="onSubmit">确认</a-button>
				<a-button style="margin-left: 10px" @click="resetForm">取消</a-button>
			</a-form-item>
		</a-form>
	</section>
</template>

<style scoped>
.contain-edit-inbound {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: auto;
}
.edit {
	box-sizing: border-box;
	margin: 16px 0;
	text-align: center;
	font-size: 16px;
	list-style: none;
}
</style>
